<template>
	<view class="wrap" :style="colorStyle">
		<view class="top_box"></view>
		<view class="main" :class="{'no_click':info.status==1||info.status==2}">
			<!-- <view class="top_img">
				<image src="../static/imgs/cert1.png" mode="aspectFill"></image>
			</view> -->
			<view class="form_box">
				<view class="title">
					1.上传个人身份证
				</view>
				<view class="body">
					<view class="id_box">
						<view class="info_text">1.请上传清晰的个人身份证正反面照片。</view>
						<view class="info_text">2.图片要求:边框完整且字体清晰，平铺，能看清本人的头像和姓名等信息。</view>
						<view class="card_img flex_s">
							<view class="card_img_item" @click="upLoadOneImg('front')">
								<image :src="info.face_img" mode="aspectFill" v-if="info.face_img"></image>
								<image src="../static/imgs/card_face.png" mode="aspectFill" v-else></image>
							</view>
							<view class="card_img_item" @click="upLoadOneImg('back')">
								<image :src="info.back_img" mode="aspectFill" v-if="info.back_img">
								</image>
								<image src="../static/imgs/card_back.png" mode="aspectFill" v-else></image>
							</view>
						</view>
					</view>
					<view class="line"></view>
					<view class="tip_text">
						以下信息为证件上传后系统自动识别填充，请您仔细核对填充内容是否正确。
					</view>
					<view class="input_form">
						<view class="form_item flex_s">
							<text class="label">真实姓名</text>
							<view class="input_box flex_c">
								<input type="text" disabled v-model="info.name" placeholder="请上传身份证" />
							</view>
						</view>
						<view class="form_item flex_s">
							<text class="label">身份证号</text>
							<view class="input_box flex_c">
								<input type="text" disabled v-model="info.id_number" placeholder="请上传身份证" />
							</view>
						</view>
						<view class="form_item flex_s">
							<text class="label">有效截止</text>
							<view class="input_box flex_c">
								<input type="text" disabled v-model="info.term_time" placeholder="请上传身份证" />
							</view>
						</view>
					</view>
					<!-- <view class="line"></view> -->
				</view>
				<!-- 				<view class="title">
					2.填写柜台地址
				</view>
				<view class="body">
					<view class="input_form">
						<view class="form_item flex_s">
							<view class="input_box flex_c mgl33">
								<input type="text" v-model="info.counter_address" placeholder="请输入柜台地址" />
							</view>
						</view>
					</view>
				</view> -->
				<!-- <view class="title">
					3.上传柜台照片
				</view>
				<view class="body">
					<view class="counter_box">
						<view class="masker_box flex_c" @click="upLoadOneImg()">
							<image :src="info.counter_photo" mode="aspectFill" v-if="info.counter_photo"></image>
							<view class="upload_icon" v-else>
								<image src="../static/imgs/camera.png" mode="aspectFill"></image>
							</view>
						</view>

					</view>
				</view> -->
				<!-- 				<view class="title">
					3.填写您的手机号码
				</view>
				<view class="body">
					<view class="input_form">
						<view class="form_item flex_s">
							<view class="input_box flex_c mgl33">
								<input type="number" maxlength="11" v-model="info.phone_number"
									placeholder="请输入您的手机号码" />
							</view>
						</view>
					</view>
				</view> -->
			</view>
		</view>
		<view class="footer flex_c">
			<template v-if="info.status">
				<view class="btn gray_btn" v-if="info.status==1">
					审核中
				</view>
				<view class="btn" v-if="info.status==2">
					已通过
				</view>
				<view class="btn" @click="authenticate_apply" v-if="info.status==3">
					重新提交
				</view>
			</template>
			<view class="btn" @click="authenticate_apply" v-else>
				提交审核
			</view>
		</view>
		<modal ref="modal" :content="info.fail_msg" :showTitle="true" :showCancel="false" @confirm="closeModal"></modal>
		<modal ref="modal2" :showCancel="false" content="提交成功，我们将在1个工作日内审核完毕，请耐心等候" @confirm="konwHandle"></modal>
	</view>
</template>

<script>
	import modal from "@/components/modal/modal.vue";
	import colors from "@/mixins/color";
	import {
		uploadIdCardImg,
		IdCardRecognition,
		authenticate_apply,
		authenticate_info
	} from "@/api/new_api.js"
	import {
		debounceImmediate
	} from "@/utils/validate";
	export default {
		mixins: [colors],
		data() {
			return {
				info: {
					face_img: '', //正面
					back_img: '', //身份证反面
					name: '', //身份证名
					id_number: '', //身份证号
					term_time: '', //有效日期
					authentication_data: {} //身份证正反面，接口识别的所有数据 json

				}
			};
		},
		onLoad() {
			this.authenticate_info()
		},
		methods: {
			konwHandle() {
				this.$refs.modal2.close()
				this.authenticate_info()
			},
			closeModal() {
				this.$refs.modal.close()
			},
			authenticate_info() {
				authenticate_info().then((res) => {
					const data = res.data.info
					if (data) {
						this.info = data
						try {
							this.info.authentication_data = JSON.parse(data
								.authentication_data) //解析身份证信息，防止提交时重复json化
						} catch (error) {
							this.info.authentication_data = data.authentication_data
						}
						if (data.status == 3 && data.fail_msg) {
							this.$refs.modal.open()
						}
					}
				})
			},
			upLoadOneImg(type) {

				this.side = type
				this.$util.uploadImageOne('upload/image', (res) => {
					const data = res.data
					if (type) {
						if (type === 'front') {
							this.info.face_img = data.url
							console.log(this.info.face_img, "正面照");
						} else {
							this.info.back_img = data.url
						}
						this.uploadIdCardImgHandler() //识别身份证
					} else {
						this.info.counter_photo = data.url
					}

				}, (err) => {
					console.log(err, "失败");
				})
			},
			uploadIdCardImgHandler() {
					uni.showLoading({
						title:"识别中..."
					})
				const params = {
					imgpath: this.side === 'front' ? this.info.face_img : this.info.back_img,
					is_type: this.side == 'front' ? 1 : 2
				}
				console.log(params,"请求参数");
				IdCardRecognition(params).then((res) => {
					uni.hideLoading()
					const data = res.data
					console.log(data.name,data.name!='暂无',"-------");
					if (data.name&&data.name!='暂无') {
						this.info.name = data.name
						this.info.id_number = data.no
					}else if(data.name&&data.name=='暂无'){
						this.$util.Tips({title:'请上传身份证正面'})
						return
					}
					if (data.expireDate&&data.expireDate!='暂无') {
						this.info.term_time = data.expireDate
					}else if(data.expireDate&&data.expireDate=='暂无'){
						this.$util.Tips({title:'请上传身份证反面'})
						return
					}
					if (this.info.authentication_data)
						this.info.authentication_data = Object.assign(this.info.authentication_data, data)
					else
						this.info.authentication_data = data
				}).catch((err) => {
					this.$util.Tips({
						title: err.msg
					})
				})

			},
			authenticate_apply: debounceImmediate(function() {
				uni.showLoading()
				this.info.authentication_data = JSON.stringify(this.info.authentication_data)
				authenticate_apply(this.info).then((res) => {
					uni.hideLoading()
					// this.$refs.modal2.open()
					this.$util.JumpPath('/pages/users/authentication/agreement')
				})
			}, 1000)
		}
	}
</script>

<style lang="scss" scoped>
	.no_click {
		pointer-events: none;
	}

	.wrap {
		overflow: hidden;
		padding-bottom: 200rpx;
		position: relative;

		.mgl33 {
			margin-left: 33rpx;
		}

		.wechat_pay {
			width: 700rpx;
			border-radius: 10rpx;
			margin: 16rpx auto 0;
			padding: 28rpx 27rpx;
			background: #fff;

			.left {

				.iconfont {
					font-size: 50rpx;
					color: #43CF7C;
				}

				.left_text {
					margin-left: 16rpx;

					.text1 {
						color: #303030;
						font-size: 28rpx;
						font-weight: 550rpx;
						margin-right: 18rpx;
					}

					.text2 {
						font-size: 26rpx;
						font-weight: 550rpx;
						color: #D43030;
					}
				}
			}

			.right {
				color: #8C8C8C;
				font-size: 26rpx;

				.mid_line {
					text-decoration: line-through;
				}
			}
		}

		.footer {
			position: fixed;
			z-index: 10;
			bottom: 0;
			left: 0;
			width: 100%;
			// height: 160rpx;
			padding-bottom: 50rpx;
			padding-top: 20rpx;
			background: #fff;

			.btn {
				width: 686rpx;
				height: 97rpx;
				text-align: center;
				line-height: 97rpx;
				background: var(--view-theme);
				border-radius: 54rpx;
				font-size: 32rpx;
				color: #fff;
			}

			.gray_btn {
				background: #A6A6A6;
			}
		}

		.top_box {
			position: absolute;
			height: 155rpx;
			width: 100%;
			background: var(--view-theme);
		}

		.main {
			margin-top: 30rpx;
			position: relative;
			overflow: hidden;

			.top_img {
				padding-top: 20rpx;
				width: 702rpx;
				height: 339rpx;
				margin: 0 auto;
				margin-bottom: 20rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.form_box {
				overflow: hidden;
				width: 702rpx;
				margin: 0 auto;
				background-color: #fff;
				border-radius: 8rpx;
				padding-bottom: 32rpx;

				.body {
					.counter_box {
						padding-left: 65rpx;

						.masker_box {
							width: 300rpx;
							height: 185rpx;
							border-radius: 4rpx;
							background: #F6F6F6;
							overflow: hidden;

							image {
								width: 100%;
								height: 100%;
							}

							.upload_icon {
								width: 58rpx;
								height: 58rpx;
								border-radius: 50%;
								overflow: hidden;

								image {
									width: 100%;
									height: 100%;
								}
							}
						}
					}

					.input_form {
						display: grid;
						grid-row-gap: 20rpx;

						.form_item {
							padding: 0 24rpx 0 32rpx;

							.label {
								font-size: 32rpx;
								font-weight: 550;
								margin-right: 47rpx;
							}

							.input_box {
								flex-grow: 1;

								height: 80rpx;
								border-radius: 4rpx;
								background: #F6F6F6;

								input {
									width: 100%;
									padding-left: 20rpx;
								}
							}
						}
					}


					.tip_text {
						font-size: 28rpx;
						color: #808080;
						padding: 0 32rpx 32rpx;
					}

					.line {
						width: 100%;
						height: 4rpx;
						background: #F6F6F6;
						margin: 32rpx 0;
					}

					.id_box {

						padding-left: 65rpx;

						.info_text {
							font-size: 28rpx;
							color: #303030;
							line-height: 40rpx;
						}

						.card_img {
							margin-top: 20rpx;
							display: grid;
							grid-template-columns: repeat(2, 1fr);
							grid-column-gap: 13rpx;

							.card_img_item {
								width: 300rpx;
								height: 185rpx;
								border-radius: 4rpx;
								overflow: hidden;
								background: #F6F6F6;

								image {
									width: 100%;
									height: 100%;
								}
							}
						}
					}
				}

				.title {
					font-size: 32rpx;
					font-weight: 550;
					margin-bottom: 18rpx;
					padding-top: 32rpx;
					padding-left: 32rpx;
				}
			}
		}

	}
</style>